<template>
  <div
    v-loading="loading"
    element-loading-text="加载中..."
    style="width: 100%; height: 100%"
  >
    <div>
      <packageSynthesizeSearch
        :formList="configForm.list.formList"
        :formArr="configForm.list.formSlotArr"
        :defaultValue="configForm.list.defaultValue"
        :labelWidth="configForm.list.labelWidth"
        :defaultSlotValue="configForm.list.defaultSlotValue"
        :tableCode="tableCode"
        @getAdvancedSearch="getAdvancedSearch"
        @submitForm="submitForm"
        @resetForm="resetForm"
        @submitFormValue="submitFormValue"
      ></packageSynthesizeSearch>
      <packageVxeTable
        :gridOptionsList="gridOptionsList.list"
        :columnDescriptionUrl="columnDescriptionUrl"
        :button-arr="btnList"
        @saveCustomColumn="saveCustomColumn"
        class="packageVxeTable"
        ref="vxeTableRef"
      ></packageVxeTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  provide,
  onMounted,
  defineAsyncComponent,
  shallowRef,
} from "vue";
import { Edit, Plus, MoreFilled, Setting } from "@element-plus/icons-vue";
// 引入自定义请求库
import { getAction, postAction } from "@/utils/system/commonUse";
import { VxeGridProps } from "vxe-table";
import { ElMessage } from "element-plus";
// 引入下载文件方法
import { download } from "@/utils/system/startel";
// 懒加载 组件
const packageSynthesizeSearch = defineAsyncComponent(
  () => import("@/components/basePage/packageSynthesizeSearch/index.vue")
);
const packageVxeTable = defineAsyncComponent(
  () => import("@/components/basePage/packageVxeTable/index.vue")
);
// 表格 code 码
const tableCode = "TANSWERQUOTE";

const configForm = reactive({
  list: {
    defaultSlotValue: Object(),
    defaultValue: Object(),
    formList: Array(),
    formSlotArr: Array(),
    labelWidth: "",
  },
});
// 表格实例
const vxeTableRef = ref();
// 搜索
const submitForm = (ruleForm: any) => {
  // 将搜索项复制
  searchList.value = ruleForm;
  // 重绘表格
  vxeTableRef.value.xGrid.commitProxy("reload");
};
// 获取插槽内部数据
const submitFormValue = (ruleForm: any) => {
  console.log("==>submitFormValue", ruleForm);
};
// 重置搜索表单
const resetForm = () => {
  searchList.value = { advancedSearch: "", condition: "" };
  // 重绘表格
  vxeTableRef.value.xGrid.commitProxy("reload");
};

const btnList = shallowRef([
  {
    type: "primary",
    icon: Plus,
    label: "增加",
    // hideCode: "exportApproval",
    clickFn: () => {
      console.log("增加按钮");
    },
  },
  {
    type: "warning",
    icon: Edit,
    label: "修改",
    // hideCode: "1221312",
    clickFn: () => {
      console.log("修改按钮");
    },
  },
  {
    type: "",
    icon: Setting,
    label: "列自定义",
    // hideCode: "1221312",
    clickFn: () => {
      console.log("列自定义按钮");
      vxeTableRef.value.controlDialog();
    },
  },
  {
    type: "",
    icon: MoreFilled,
    label: "更多",
    // hideCode: "1221312",
    more: true,
    dropdownItem: [
      {
        label: "下载文件",
        clickFn: () => {
          console.log("下载文件");
          download(
            `${url.downloadFileApi}?str=1&name=zs`,
            { aaa: 111 },
            "测试下载表格.xlsx"
          );
        },
      },
      {
        label: "上传文件",
        clickFn: () => {
          console.log("上传文件");
        },
      },
      {
        label: "删除文件",
        clickFn: () => {
          console.log("删除文件");
        },
      },
    ],
  },
]);

const url = reactive({
  getTableColumnListApi: "/dynamic/dynamicTable/queryTableByTableCode",
  getTableListApi: "/dynamic/dynamicTable/queryDataByTableCode",
  getAdvancedQueryApi: "/dynamic/dynamicTable/querySearchByTableCode",
  downloadFileApi: "/dynamic/dynamicTable/exportFile",
  saveCustomColumnApi: "/dynamic/columnDescription/saveCustomColumn",
  getSaveListApi: "/dynamic/queryInfo/getList",
});

// 自定义列url
const columnDescriptionUrl = reactive({
  getDynamicColumnsApi:
    "/dynamic/columnDescription/queryCustomColumnList/TANSWERQUOTE",
  saveDynamicColumnsApi:
    "/dynamic/columnDescription/saveCustomColumn/TANSWERQUOTE",
});

const gridOptionsList = reactive({
  list: {} as VxeGridProps,
});

// 搜索项
const searchList = ref({
  advancedSearch: "",
  condition: "",
});
const loading = ref(false);

/**
 * 获取动态列表格数据
 */
const getTableColumnList = () => {
  loading.value = true;
  getAction(`${url.getTableColumnListApi}`, {
    tableCode: "TANSWERQUOTE",
  })
    .then((data: any) => {
      // 表格配置
      gridOptionsList.list = data.data.tableConfig;
      // 将后端配置的属性 付给组件中
      configForm.list = { ...data.data.formConfig };
      // 数据代理
      gridOptionsList.list.proxyConfig!.ajax = {
        query: (config: any) => {
          const page = { ...config.page };
          return pagingMethod({
            currentPage: page.currentPage,
            pageSize: page.pageSize,
          });
        },
      };
      loading.value = false;
    })
    .catch((err) => {
      console.log(err);
      loading.value = false;
    });
};
/**
 * 分页获取数据
 */
const pagingMethod = (pageConfig: {
  currentPage: Number;
  pageSize: Number;
}) => {
  loading.value = true;
  return getAction(
    `${url.getTableListApi}/TANSWERQUOTE/${pageConfig.pageSize}/${pageConfig.currentPage}`,
    searchList.value
  )
    .then((data: any) => {
      console.log("分页数据=>", data);
      loading.value = false;
      return data.data;
    })
    .catch((err) => {
      console.log("err=>", err);
      loading.value = false;
    });
};
/**
 * 高级查询
 */
const getAdvancedQueryList = () => {
  return getAction(`${url.getAdvancedQueryApi}?tableCode=TANSWERQUOTE`)
    .then((data: any) => {
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      // console.log("data.data", data.data);
      return data.data;
    })
    .catch((err) => {
      console.log("err=>", err);
      ElMessage.error("获取高级查询列表失败");
    });
};
/**
 * 获取保存列表
 */
const getSaveList = () => {
  return getAction(`${url.getSaveListApi}?tableCode=TANSWERQUOTE`)
    .then((data: any) => {
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      return data.data;
    })
    .catch((err) => {
      console.log("err=>", err);
      ElMessage.error("获取高级查询列表失败");
    });
};

// 祖先组件发布事件  让后续子孙组件 获取高级搜索列表
provide("getAdvancedQueryList", getAdvancedQueryList);
provide("getSaveList", getSaveList);

/**
 * 获取高级搜索项给后端
 */
const getAdvancedSearch = (arrList: any[], condition: string) => {
  let arrJson = [];
  for (const item of arrList) {
    arrJson.push({
      content: item.content,
      fieldsName: item.fieldsName,
      operator: item.operator,
    });
  }
  searchList.value.advancedSearch = encodeURI(JSON.stringify(arrJson));
  // 条件方式
  searchList.value.condition = condition;
  // 重绘表格
  vxeTableRef.value.xGrid.commitProxy("reload");
};
/**
 * 保存自定义列
 */
const saveCustomColumn = () => {
  setTimeout(() => {
    getTableColumnList();
  }, 300);
};
onMounted(() => {
  getTableColumnList();
});
</script>

<style lang="scss" scoped></style>
